<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ellipse</title>
  </head>
  <body>
    <!-- 
    1. ellipse 椭圆
    2. rx、ry、cx 和 cy 是 ellipse（椭圆）基本的四个属性
    3. rx 和 ry 分别定义椭圆的水平半径和垂直半径
    4. cx 和 cy 分别定义圆心坐标
     -->
    <svg
      width="200"
      height="200"
      viewBox=""
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" fill="pink" />
      <!-- 三原色 -->
      <ellipse cx="100" cy="110" rx="50" ry="20" style="fill: blue" />
      <ellipse cx="100" cy="100" rx="50" ry="20" style="fill: green" />
      <ellipse cx="100" cy="90" rx="50" ry="20" style="fill: red" />

      <!-- 重叠椭圆 -->
      <ellipse cx="100" cy="150" rx="80" ry="20" style="fill: yellow" />
      <ellipse cx="95" cy="150" rx="70" ry="15" style="fill: white" />
    </svg>
  </body>
</html>
